<template>
  <div class="faq">
    <div class="title">充值说明</div>
    <ul class="items">
      <li class="item">购买的【代金券】道具将通过游戏内邮件发放到您的账号，请玩家注意查收。</li>
      <li class="item">【代金券】是游戏内一种新的道具，可用于兑换相应价值的礼包。</li>
      <li class="item">购买【代金券】礼包不会获得VIP经验，但使用【代金券】购买游戏内礼包会正常获得VIP经验。 </li>
      <li class="item">离线状态下商品充值可能会有延迟，请尝试重新登录或联系客服处理未到账问题。 </li>
      <li class="item">官方网页支付平台仅支持角色ID登录。 </li>
      <li class="item">【代金券】赠礼活动为限时活动。 </li>
      <li class="item">每月首笔订单98折活动开启时，每个角色都可以参与一次。首笔订单金额和商品无限制，批量购买也可参与活动；如果使用折扣机会的订单超时8分钟未完成支付，在未完成本月首单的情况下创建新订单仍享有折扣机会。
        更多相关问题说明请查看。</li>
    </ul>
    <div class="more" @click="wtClick">
      查看更多相关问题说明
      <svg width="10" height="12" xmlns="http://www.w3.org/2000/svg" style="margin-left: 6px;">
        <path
          d="m5.35 10.903 3.216-4.924L5.35 1.055c-.18-.302-.18-.703 0-.904.27-.201.629-.201.807 0l3.754 5.628c.089 0 .089.1.089.201 0 .1 0 .1-.09.201L6.158 11.81c-.269.301-.627.2-.807 0-.18-.303-.18-.705 0-.907Zm-.564-5.125c.09 0 .09.1.09.2 0 .101 0 .202-.09.202l-3.753 5.628c-.27.302-.628.201-.808 0-.178-.3-.178-.703 0-.904L3.441 5.98.135 1.055c-.18-.302-.18-.703 0-.904.269-.201.629-.201.807 0l3.844 5.627Z"
          fill="currentColor" fill-rule="nonzero"></path>
      </svg>
    </div>
    <!-- <div class="links">
      前往极贝大会员领取1%额外返利
      <svg width="10" height="12" xmlns="http://www.w3.org/2000/svg" style="margin-left: 6px;">
        <path
          d="m5.35 10.903 3.216-4.924L5.35 1.055c-.18-.302-.18-.703 0-.904.27-.201.629-.201.807 0l3.754 5.628c.089 0 .089.1.089.201 0 .1 0 .1-.09.201L6.158 11.81c-.269.301-.627.2-.807 0-.18-.303-.18-.705 0-.907Zm-.564-5.125c.09 0 .09.1.09.2 0 .101 0 .202-.09.202l-3.753 5.628c-.27.302-.628.201-.808 0-.178-.3-.178-.703 0-.904L3.441 5.98.135 1.055c-.18-.302-.18-.703 0-.904.269-.201.629-.201.807 0l3.844 5.627Z"
          fill="currentColor" fill-rule="nonzero"></path>
      </svg>
    </div> -->
    <div class="links" @click="fkClick">
      意见反馈
      <svg width="10" height="12" xmlns="http://www.w3.org/2000/svg" style="margin-left: 6px;">
        <path
          d="m5.35 10.903 3.216-4.924L5.35 1.055c-.18-.302-.18-.703 0-.904.27-.201.629-.201.807 0l3.754 5.628c.089 0 .089.1.089.201 0 .1 0 .1-.09.201L6.158 11.81c-.269.301-.627.2-.807 0-.18-.303-.18-.705 0-.907Zm-.564-5.125c.09 0 .09.1.09.2 0 .101 0 .202-.09.202l-3.753 5.628c-.27.302-.628.201-.808 0-.178-.3-.178-.703 0-.904L3.441 5.98.135 1.055c-.18-.302-.18-.703 0-.904.269-.201.629-.201.807 0l3.844 5.627Z"
          fill="currentColor" fill-rule="nonzero"></path>
      </svg>
    </div>

    <!-- 更多 相关问题弹窗 -->
    <popupBar :popshow.sync="wtShow" :isMobile="isMobile">
      <div class="popup wt">
        <div class="popup-title-wrap">
          相关问题说明
          <i class="el-icon-close close" @click="wtShow = false"></i>
        </div>
        <div class="popup-content wt">
          <div class="qa-list">
            <div class="qa" v-for="item in qaList">
              <div class="qa-title" @click="qaTitle(item)">
                <span>{{ item.q }}</span>
                <svg v-show="!item.show" width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" class="antd-mobile-icon" style="vertical-align: -0.125em;">
                  <g id="DownOutline-DownOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g>
                      <rect id="DownOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
                      <path
                        d="M5.11219264,16.3947957 L22.6612572,34.5767382 L22.6612572,34.5767382 C23.2125856,35.1304785 24.0863155,35.1630514 24.6755735,34.6744571 L24.7825775,34.5767382 L42.8834676,16.3956061 C42.9580998,16.320643 43,16.2191697 43,16.1133896 L43,12.9866673 C43,12.7657534 42.8209139,12.5866673 42.6,12.5866673 C42.4936115,12.5866673 42.391606,12.6290496 42.316542,12.7044413 L23.7816937,31.3201933 L23.7816937,31.3201933 L5.6866816,12.7237117 C5.53262122,12.5653818 5.27937888,12.5619207 5.121049,12.7159811 C5.04365775,12.7912854 5,12.8946805 5,13.0026627 L5,16.1170064 C5,16.2206403 5.04022164,16.3202292 5.11219264,16.3947957 Z"
                        id="DownOutline-down" fill="currentColor" fill-rule="nonzero"></path>
                    </g>
                  </g>
                </svg>
                <svg v-show="item.show" width="1em" height="1em" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink" class="antd-mobile-icon" style="vertical-align: -0.125em;">
                  <g id="UpOutline-UpOutline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g>
                      <rect id="UpOutline-矩形" fill="#FFFFFF" opacity="0" x="0" y="0" width="48" height="48"></rect>
                      <path
                        d="M5.11219264,30.7053818 L22.6612572,12.5234393 L22.6612572,12.5234393 C23.2125856,11.969699 24.0863155,11.9371261 24.6755735,12.4257204 L24.7825775,12.5234393 L42.8834676,30.7045714 C42.9580998,30.7795345 43,30.8810078 43,30.9867879 L43,34.1135102 C43,34.3344241 42.8209139,34.5135102 42.6,34.5135102 C42.4936115,34.5135102 42.391606,34.4711279 42.316542,34.3957362 L23.7816937,15.7799842 L23.7816937,15.7799842 L5.6866816,34.3764658 C5.53262122,34.5347957 5.27937888,34.5382568 5.121049,34.3841964 C5.04365775,34.3088921 5,34.205497 5,34.0975148 L5,30.9831711 C5,30.8795372 5.04022164,30.7799483 5.11219264,30.7053818 Z"
                        id="UpOutline-up" fill="currentColor" fill-rule="nonzero"></path>
                    </g>
                  </g>
                </svg>
              </div>
              <el-collapse-transition>
                <div class="answer" v-show="item.show">
                  <div>
                    <p v-for="aitem in item.a">{{ aitem }}</p>
                  </div>
                </div>
              </el-collapse-transition>

            </div>
          </div>

        </div>
      </div>
    </popupBar>


    <!-- 意见反馈弹窗 -->
    <popupBar :popshow.sync="fkShow" :isMobile="isMobile">
      <div class="popup fk">
        <div class="popup-title-wrap">
          意见反馈
          <i class="el-icon-close close" @click="fkShow = false"></i>
        </div>
        <div class="popup-content fk">
          <img src="@/assets/images/feedback.png" alt="" class="icon">
          <div class="email-desc">欢迎您将反馈意见发送到我们的官方邮箱</div>
          <div class="email">{{ email }}</div>
          <div class="copy-email-btn" @click="copyText">点击复制邮箱地址</div>
        </div>
      </div>
    </popupBar>
  </div>
</template>
<script>
import popupBar from '@/views/store/components/popupBar.vue'
export default {
  name: 'payInfo',
  props: ['isMobile'],
  components: {
    popupBar
  },
  data() {
    return {
      email: 'koudaikf@outlook.com',
      fkShow: false,
      wtShow: false,
      qaList: [
        {
          q: '支付宝支付有限额吗？',
          a: [
            '根据您的支付方式不同，额度限制也会有所不同，详情如下：',
            '1、若您使用支付宝余额付款，具体额度上限会根据您的账户情况有所不同，每年最高可累计支付20万元。',
            '2、若您使用绑定的银行卡付款，那么支付的额度规则与您的银行卡额度保持一致。',
            '3、若您使用余额宝付款，则没有限额。',
            '如果您发现使用支付宝支付时遇到额度问题，推荐您优先用余额宝支付，或者更换银行卡支付。更多支付宝支付相关问题，可进入支付宝app-我的-右上角我的客服-搜索询问或联系在线客服，或直接与我们的客服联系，感谢您的理解！'
          ],
          show: false
        },
        {
          q: '遇到支付宝支付限额该怎么办？',
          a: [
            '余额支付遇到限额：',
            '因受到监管部门的要求，系统会根据您不同的支付场景以及账户等级计算余额支付额度，不同的场景额度会有差异。如您的余额支付额度未达到20万，受到限制，请您根据页面提示完善您的身份信息。',
            '银行卡支付限额如下：',
            '1、若超过单笔额度',
            '您可分多笔充值到支付宝余额后，再进行付款。',
            '2、若超过银行卡单日支付限额',
            '您可以选择使用余额、余额宝或其他银行卡进行付款。',
            '3、若超过月累计额度',
            '如果您有开通网银，且网银额度足够支付时，可以在电脑端使用网银充值到支付宝余额后，再进行付款。（您可进入微信-我的-支付-钱包-帮助中心-支付不了-银行卡限额，查看不同银行卡额度限制情况）'
          ],
          show: false
        },
        {
          q: '遇到支付宝提示谨防诈骗该怎么办？',
          a: [
            '非常抱歉，如您遇到支付宝弹出【交易失败，谨防诈骗】的提示，点击取消即可关闭订单。',
            '关闭订单后，您可拨打95188联系支付宝客服，或与游戏客服联系，反应您遇到的问题，客服会根据您的问题情况做出解决指引。'
          ],
          show: false
        },
        {
          q: '微信支付有限额吗？',
          a: [
            '单笔支付的上限为6000元，单日支付的上限为9000元。零钱、每张银行卡、信用卡的额度将单独计算。比如，如果您使用两张银行卡支付，则单日支付上限即为9000*2=18000元，以此类推。',
            '如果您使用零钱通支付，则不受上述规则限制。'
          ],
          show: false
        },
        {
          q: '遇到微信支付限额该怎么办？',
          a: [
            '如果您发现用微信支付遇到额度问题，推荐您优先用零钱通支付，或者更换银行卡支付。更多微信支付相关问题，可进入微信-我的-支付-钱包-帮助中心-查看问题或咨询客服，或直接与游戏客服联系，感谢您的理解！',
          ],
          show: false
        },
        {
          q: '遇到微信提示支付触发风险怎么办？',
          a: [
            '如提示被冻结、拦截无法使用红包、转账支付功能；付款时出现提示该笔交易存在安全风险问题；收款时他人无法给您转入资金等交易受限问题。以上这些皆是微信后台自动触发的提示，需要麻烦您手动解除，方法为：',
            '进入微信选择“我”-支付-钱包-最下方“帮助中心”-支付不了-解除支付限制。',
            '如以上操作无法解决您的问题，您也可以将“查看解决方案”后的页面截图反馈微信客服或我们的客服，以便我们帮您更好地解决问题。',
            '极贝游戏支付中心为极贝官方的支付平台，我们将竭力为您提供安全、便捷的支付体验。'
          ],
          show: false
        },
        {
          q: '如何找到微信支付/支付宝支付的客服？',
          a: [
            '微信：进入微信-我的-支付-钱包-帮助中心-查看问题或咨询客服。',
            '支付宝：进入支付宝app-我的-右上角我的客服-搜索询问或联系在线客服。',
          ],
          show: false
        },
        // {
        //   q: '未成年有充值限额吗？',
        //   a: [
        //     '根据《国家新闻出版署关于防止未成年人沉迷网络游戏的通知》第三款之规定：',
        //     '1、未满8周岁的用户不能充值。',
        //     '2、8周岁以上但未满16周岁的用户，单次充值金额不得超过50元人民币，每月充值金额累计不得超过200元人民币。',
        //     '3、16周岁以上但未满18周岁的用户，每次充值金额不得超过100元人民币，每月充值金额累计不得超过400元人民币。',
        //   ],
        //   show: false
        // },
        // {
        //   q: '支付宝随机立减活动怎么参加？',
        //   a: [
        //     '一、活动时间：2023-11-16 10:00:00 2023-11-30 23:59:59',
        //     '二、活动期间在极贝支付中心购物，即可参与首单随机立减优惠。',
        //     '三、活动规则：',
        //     '1、活动期间在极贝支付中心购物，30天及以上未使用支付宝支付的用户可参与“支付宝随机立减”活动。',
        //     '2、若享受优惠付款完成后发生退款，仅退还实付金额，优惠金额不退还，且无第二次享受优惠的机会。',
        //     '3、本次活动仅限支付宝实名用户参与，同一用户（同一支付宝账号、身份证号、手机号码、终端设备号，满足任一条件均视为同一用户）活动期内仅可享受1次随机立减优惠资格。',
        //     '4、如用户出现或涉嫌违法违规行为（如虚假交易、作弊、恶意套取现金、刷信等），优惠资格将被取消，已获得的优惠金额（包括已消费金额）将收回。',
        //     '5、如出现不可抗力或情势变更的情况，如自然灾害事件，活动受政府机关指令需要停止举办或调整等，活动主办方可免于承担责任。',
        //   ],
        //   show: false
        // }
      ]
    }
  },
  methods: {
    fkClick() {
      this.fkShow = true
    },
    wtClick() {
      this.wtShow = true
    },
    qaTitle(item) {
      item.show = !item.show
    },
    copyText() {
      // 创建 input 元素
      const el = document.createElement("input");
      // 设置 input 的值为需要复制的文本内容
      el.value = this.email;
      // 将 input 添加到页面上
      document.body.appendChild(el);
      // 选中 input 中的文本
      el.select();
      // 执行复制操作
      document.execCommand("copy", true);
      // 将 input 从页面上移除
      document.body.removeChild(el);
      this.$message.success('复制成功！');
    },
  }
}
</script>
<style lang="scss">
.faq {
  margin: 20px 15px 40px 0;

  margin-top: 20px;
  padding-left: 0px;
  margin-bottom: 0px;

  .title {
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
    line-height: 25px;
  }

  .items {
    display: block;
    list-style-type: disc;
    // margin-block-start: 1em;
    // margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
    -webkit-padding-start: 1em;
    padding-inline-start: 1em;

    .item {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999;
      line-height: 20px;
      margin-top: 10px;
    }
  }

  .more {
    height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #d32f2f;
    line-height: 20px;
    margin-top: 10px;
    align-items: center;
    display: inline-flex;
    cursor: pointer;
  }

  .links {
    margin-top: 20px;
    font-size: 14px;
    font-family: PingFangSC-Regular, "PingFang SC";
    font-weight: 400;
    color: #d32f2f;
    cursor: pointer;
    user-select: none;
  }
}

.popup {

  background-color: #fff;
  border-radius: 8px;

  &.fk {
    width: 450px;
  }

  &.wt {
    width: 600px;
  }

  >.popup-title-wrap {
    position: relative;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 15px;
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333;
    background-color: #fff;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 4px 0px;
    border-radius: 8px 8px 0 0;

    >.close {
      position: absolute;
      z-index: 100;
      right: 8px;
      top: 8px;
      cursor: pointer;
      padding: 4px;
      font-size: 20px;
      color: #999;
    }
  }

  .popup-content {
    padding: 0 90px;
    text-align: center;

    &.fk {
      height: 450px;
    }

    &.wt {
      max-height: 70vh;
      overflow: auto;
      padding: 10px 15px;
    }

    >.icon {
      width: 100px;
      height: 96px;
      margin: 80px auto 0;
    }

    >.email-desc {
      margin-top: 32px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #999;
      line-height: 19px;
    }

    >.email {
      margin-top: 13px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #d32f2f;
      line-height: 19px;
    }

    .copy-email-btn {
      margin-top: 15px;
      display: inline-block;
      padding: 10px 29px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #fff;
      line-height: 19px;
      background: linear-gradient(115deg, #e22c2c 0%, #d32f2f 100%);
      border-radius: 28px;
      user-select: none;
      cursor: pointer;

      :hover {
        opacity: .999;
      }
    }
  }
}

.qa {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;

  .qa-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    // max-width: 92%;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 400;
    color: #333;
    line-height: 20px;
    word-wrap: break-word;
  }

  .answer {
    background: #f9f9f9;
    border-radius: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    line-height: 20px;
    display: flex;
    padding: 10px;
    margin-top: 5px;
    text-align: left;
  }
}

.mobile-body {
  .popup {
    width: 100%;
    border-radius: 0;

    .popup-title-wrap {
      border-radius: 0;
    }

    .popup-content {

      &.fk {
        padding: 0 25px;
        height: calc(min(70vh, 600px));
      }

      .email-desc {
        margin-top: 42px;
        font-size: 18px;
        line-height: 25px;
      }

      .email {
        margin-top: 18px;
        font-size: 18px;
        line-height: 25px;
      }

      .copy-email-btn {
        margin-top: 20px;
        padding: 13px 38px;
        font-size: 18px;
        line-height: 25px;
      }
    }
  }
}
</style>